<template>
    <div class="tollber">
        <el-button size="mini" @click="addCpmonent">动物室</el-button>
        <div v-if="canvasStyleData">
            画布宽度：<el-input-number v-model="canvasStyleData.width" size="mini" controls-position="right" :precision="0" :min="0" :max="10000"></el-input-number>
        </div>
        <div v-if="canvasStyleData">
            画布高度：<el-input-number v-model="canvasStyleData.height" size="mini" controls-position="right" :precision="0" :min="0" :max="10000"></el-input-number>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { deepCopy } from '@/utils/grids/util'

export default {
    data() {
        return {
            canvasModel: {},
            componentDataList: [
                {
                    component: 'animal-room',
                    label: '动物室',
                    propValue: '双击编辑文字',
                    icon: 'wenben',
                    style: {
                        top: 0,
                        left: 0,
                        width: 200,
                        height: 200,
                        rotate: 0,
                        color: '',
                        backgroundColor: '#E3F6FF',
                        borderTop: 1,
                        borderRight: 1,
                        borderBottom: 1,
                        borderLeft: 1
                    },
                    children: []
                }
            ]
        }
    },
    computed: {
        ...mapState({
            canvasStyleData: state => state.grids.canvasStyleData,
        }),
    },
    methods: {
        addCpmonent() {
            this.$store.dispatch('setComponentData', {
                mode: 'push',
                value: deepCopy(this.componentDataList[0])
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.tollber{
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px;
}
</style>